<template>
  <section class="detail-box">
    <el-row type="flex" justify="space-between" class="detail-top-nav">
      <span>缴费详情</span>
    </el-row>
    <el-row class="detail-info">
      <div class="info-title">学生信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">姓名</span>
          <span>{{detailInfo.name}}</span>
        </div>
        <div class="info-item">
          <span class="left">证件号码</span>
          <span>{{detailInfo.cardNo}}</span>
        </div>
        <div class="info-item">
          <span class="left">班级</span>
          <span>{{detailInfo.className}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="detail-info">
      <div class="info-title">缴费信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">缴费项目</span>
          <span>{{detailInfo.schoolPaymentSkuName}}</span>
        </div>
        <div class="info-item">
          <span class="left">应缴金额</span>
          <span>{{detailInfo.schoolPaymentSkuAmount | currency}}</span>
        </div>
        <div class="info-item">
          <span class="left">已缴金额</span>
          <span>{{detailInfo.payAmount | currency}}</span>
        </div>
        <div class="info-item">
          <span class="left">待缴金额</span>
          <span>{{detailInfo.noPayAmount | currency}}</span>
        </div>
        <div class="info-item">
          <span class="left">缴费单号</span>
          <span>{{detailInfo.orderNo}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="detail-info">
      <div class="info-title">支付信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">支付方式</span>
          <span>微信支付</span>
        </div>
        <div class="info-item">
          <span class="left">支付金额</span>
          <span>{{detailInfo.price | currency}}</span>
        </div>
        <div class="info-item">
          <span class="left">支付时间</span>
          <span>{{detailInfo.payTime | timeFormat('yyyy-MM-dd hh:mm:ss')}}</span>
        </div>
        <div class="info-item">
          <span class="left">第三方流水号</span>
          <span>{{detailInfo.tradeNo}}</span>
        </div>
      </el-col>
    </el-row>
  </section>
</template>
<script>
import { getPaymentInfo } from 'api/school/settlement/index'
import common from 'src/util/common'
import ctable from 'components/common/ctable'
import { timeFormat } from 'src/filter/index'
export default {
  data () {
    return {
      detailInfo: {}, // 详情信息
      lists: [],
      thead: [{
        name: '支付方式',
        prop: 'a'
      }, {
        name: '缴费金额',
        prop: 'a'
      }, {
        name: '支付时间',
        prop: 'payTime',
        format: this.dateFilter
      }, {
        name: '第三方流水号',
        prop: 'a'
      }]
    }
  },
  created () {
    getPaymentInfo({
      id: Number(common.params('id'))
    }).then(res => {
      this.detailInfo = res.data
    })
  },
  components: {
    ctable
  },
  methods: {
    dateFilter (row, col, value) {
      return timeFormat(value, 'yyyy-MM-dd hh:mm:ss')
    }
  }
}
</script>
<style lang="less" scoped>
  .detail-box {
    padding: 20px 10px 0;
    .detail-top-nav {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .detail-info {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 12px 10px 0;
      margin-bottom: 20px;
      .info-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
        padding-left: 10px;
      }
      .info-list {
        padding: 20px 0;
      }
      .info-item {
        padding-left: 10px;
        padding-bottom: 16px;
        color: #4f4f4f;
      }
      .info-item:last-child {
        padding-bottom: 0;
      }
      .left {
        display: inline-block;
        width: 120px;
        text-align: left;
        color: gray;
      }
    }
  }
</style>
